<template>
	<div class="system-menu-container layout-pd">
		<el-card shadow="hover">
			<el-form-item label="语种">
				<el-select v-model="state.lang" placeholder="请选择语种" clearable class="w100">
					<el-option label="简体中文" value="zh-cn"></el-option>
					<el-option label="繁体中文" value="zh-tw"></el-option>
					<el-option label="English" value="en"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="内容">
				<Vue3JsonEditor
					class="editor"
					v-model="state.json"
					:expandedOnStart="true"
					:mode="state.mode"
					:modes="state.modes"
					@json-change="onJsonChange"
					@mode-change="onModeChange"
				/>
			</el-form-item>
		</el-card>
	</div>
  </template>
  
<script  setup lang="ts" name="i18n">
import { reactive } from 'vue'
import { Vue3JsonEditor } from 'vue3-json-editor'
import {useLangApi} from '/@/api/lang/index'

// 引入 api 请求接口
const langApi = useLangApi();

const state = reactive({
	json: {},
	mode: "code",
	modes: ["code"],
	lang: "zh-cn"
});

// 初始化表格数据
const getLangConfig = () => {
	useLangApi.getLang(state.tableData.param).then((res) => {
		state.tableData.data = res.data;
		state.tableData.total = res.total;
		state.tableData.loading = false;
	})
};

const onJsonChange = (value) => {
	console.log('value:', value)
}

const onModeChange = (value) => {
	console.log('value:', value)
}
  
</script>

<style>
.editor {
	display: block;
	width: 100%;
}
.editor .jsoneditor-outer {
	height: 600px;
}
</style>